<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <svg
      class="chat-1"
      width="162"
      height="155"
      viewBox="0 0 162 155"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M54 64.5833H54.0675H54ZM81 64.5833H81.0675H81ZM108 64.5833H108.068H108ZM60.75 103.333H33.75C30.1696 103.333 26.7358 101.972 24.2041 99.5501C21.6723 97.1278 20.25 93.8424 20.25 90.4166V38.75C20.25 35.3243 21.6723 32.0389 24.2041 29.6165C26.7358 27.1942 30.1696 25.8333 33.75 25.8333H128.25C131.83 25.8333 135.264 27.1942 137.796 29.6165C140.328 32.0389 141.75 35.3243 141.75 38.75V90.4166C141.75 93.8424 140.328 97.1278 137.796 99.5501C135.264 101.972 131.83 103.333 128.25 103.333H94.5L60.75 135.625V103.333Z"
        stroke="#567DF4"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

    <div>
      <div class="">剧本策划</div>
      <div class="add-your-word">Add your word</div>
      <div class="mobile-dumber">
        <div class="rectangle-1738"></div>
        <div class="mobile-dumber2">
          <div class="2">剧本主题</div>
        </div>
      </div>
    </div>
    <div class="not-data">
      <div class="mobile-dumber3">
        <div class="rectangle-17382"></div>
        <div class="mobile-dumber4">
          <div class="2">故事梗概</div>
          <div class="synopsis">Synopsis</div>
        </div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-text2">重新生成</div>
    <div class="button-square-2-big-1-primary2">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-text3">修改</div>
    <div class="button-square-2-big-1-primary3">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-text4">分镜脚本</div>
    <div class="rectangle5"></div>
    <div class="home">Home</div>
    <div class="services2">Support</div>
    <div class="services3">Contact</div>
    <div class="services4">Pricing</div>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 675px;
  top: calc(50% - -350px);
}
.chat-1 {
  position: absolute;
  left: 315px;
  top: 210px;
  overflow: visible;
}
.not-data {
  position: absolute;
  inset: 0;
}
. {
  color: var(--_03, #22215b);
  text-align: center;
  font: 600 24px "Manrope", sans-serif;
  position: absolute;
  left: 346px;
  top: 370px;
  width: 96px;
  height: 24.25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-your-word {
  color: var(--_04, #9090ad);
  text-align: center;
  font: 500 14px "Manrope", sans-serif;
  position: absolute;
  left: 347px;
  top: 395.72px;
  width: 94px;
  height: 13.96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-dumber {
  width: 327px;
  height: 107.29px;
  position: static;
}
.rectangle-1738 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 327px;
  height: 99.94px;
  position: absolute;
  left: 243px;
  top: 428.06px;
}
.mobile-dumber2 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 253px;
  top: 420.71px;
}
.2 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 400 14px "Manrope", sans-serif;
  position: relative;
}
.mobile-dumber3 {
  width: 604px;
  height: 292px;
  position: static;
}
.rectangle-17382 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 604px;
  height: 282px;
  position: absolute;
  left: 669px;
  top: 246px;
}
.mobile-dumber4 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 140.38px;
  position: absolute;
  left: 687.47px;
  top: 236px;
}
.synopsis {
  color: var(--_04, #9090ad);
  text-align: center;
  font: 500 14px "Manrope", sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-square-2-big-1-primary {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 340px;
  top: 556px;
}
.group-12 {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.button {
  background: #567df4;
  border-radius: 6px;
  width: 108px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.button-text {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 55px;
  left: 53px;
  bottom: 2px;
  top: 15px;
}
.button-text2 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 1014px;
  left: 360px;
  bottom: 212px;
  top: 564px;
}
.button-square-2-big-1-primary2 {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 672px;
  top: 554px;
}
.button-text3 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 698px;
  left: 709px;
  bottom: 214px;
  top: 562px;
}
.button-square-2-big-1-primary3 {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 828px;
  top: 554px;
}
.button-text4 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 526px;
  left: 848px;
  bottom: 214px;
  top: 562px;
}
.rectangle5 {
  width: 1440px;
  height: 100px;
  position: absolute;
  left: -314px;
  top: 700px;
}
.home {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 552px;
  top: 731px;
  width: 45px;
  height: 19px;
}
.services2 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 727px;
  top: 731px;
  width: 60px;
  height: 19px;
}
.services3 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 824px;
  top: 731px;
  width: 59px;
  height: 19px;
}
.services4 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 638px;
  top: 731px;
  width: 60px;
  height: 19px;
}
</style>
